<template>
	<view class="basicinfo-page relative">
		<view class="basicinfo-box relative font-hanserif-regular">
			<!-- <image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/user/basic-info-bg.png`" class="bg" /> -->
			
			<view class="item relative">
				<view class="flex content">
					<view class="lable">头像</view>
					<view class="flex flex-all-center" @click.stop="clickImg(1)">
						<image :src="form.avatar" class="active" mode="aspectFill" />

						<!-- <image v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
						style="width: 13rpx;height: 27rpx;"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/user/basic-info-icon-right.png`"
						class="icon-right" /> -->
					</view>	
				</view>
				
				<view class="line2"></view>
				
				<comHeadSculpture v-show="isHead" @changeAvatar="changeAvatar" class="com-head-sculpture" />
				
				<view class="flex content">
					<view class="lable">昵称</view>
					<view class="flex flex-all-center" @click.stop="clickImg(2)">
						<input v-model="form.nickname" :maxlength="10" class="value truncate" placeholder="请输入昵称" placeholder-style="color:#FFFFFF" @blur="blur" />
						<!-- <image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
						style="width: 29rpx;height: 26rpx;"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/user/basic-info-icon-edit.png`"
						class="icon-right" /> -->
					</view>
				</view>
				
				<view class="line2"></view>
				
				<view class="flex content">
					<view class="lable">UID</view>
					<view class="flex flex-align-items-center flex-end" style="width: 80%;" @click.stop="clickImg(3, form.openid)">
						<view class="truncate">{{ form.openid }}</view>
						<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
						style="width: 28rpx;height: 28rpx;"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/user/basic-info-icon-copy.png`"
						class="icon-right" />
					</view>
				</view>
			</view>
		</view>
		
		<comSystemImg v-model="isSystemImg" :defaultSelect="defaultSelect" Height="380rpx" @change="changeHeadImg" :imgs="imgs"></comSystemImg>
		
		<view class="submit-btn relative" @click="submit">
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/user/basic-info-submit-btn-bg.png`" class="bg" />
			<view class="relative">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import { getUserPortraitApi, getUpdateUserInfoApi } from '@/setupproject/INTERFACE';

	import store from '@/store';
	import { ACTIONS } from '@/store/modules/userStore';
	import { base64ToPath, pathToBase64 } from 'image-tools'; // 图像转换工具
	export default {
		name: 'comBasicInfo',
		data() {
			return {
				defaultSelect: 2, //默认选中下标，从0开始
				isSystemImg: false,
				isHead: false,
				imgs: [],
				
				form: {
					nickname: '',
					avatar: '',
					// id: '',
					openid: '',
				},
				
			};
		},
		computed: {
			
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
			userInfo() {
				return this.$store.getters.userInfo;
			},
			
		},
		watch: {
			userInfo: {
				handler(val) {
					const { form, userInfo } = this;

					this.form.nickname = userInfo.nickname;

					this.form.avatar = userInfo.avatar;

					this.form.id = String(userInfo.id);

					this.form.openid = userInfo.openid;
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			// 选择系统头像
			changeHeadImg(index) {
				this.form.avatar = this.imgs[index].path;
			},
			
			// 更换头像
			changeAvatar(id) {
				this.isHead = false;
				if (id === 1) {
					this.isSystemImg = true;
				} else {
					this.uploadUserHead();
				}
			},
			
			// 保存
			async submit() {
				if (!this.form.avatar) {
					return uni.showToast({
						title: '请上传图片',
						icon: 'none',
						mask: true,
						duration: 1500
					});
				}
				if (!this.form.nickname) {
					return uni.showToast({
						title: '请输入正确昵称',
						icon: 'none',
						mask: true,
						duration: 1500
					});
				}
				const { msg, code } = await getUpdateUserInfoApi({ nickname: this.form.nickname, avatar: this.form.avatar });
				uni.showToast({
					title: msg,
					icon: 'none',
					mask: true,
					duration: 1500
				});
			
				store.dispatch(ACTIONS.USER_INFO_GET_FUN);
			},
			
			// 点击图片编辑
			clickImg(id, data) {
				if (id === 1) {
					this.isHead = !this.isHead;
					this.getSystem();
				} else if (id === 2) {
				} else {
					uni.setClipboardData({
						data,
						success: function () {
							uni.showToast({
								title: `已复制UID：${data}`,
								icon: 'none'
							});
						}
					});
				}
			},
			
			// 上传头像
			uploadUserHead() {
				// 从相册选择6张图
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album'],

					success: (res) => {
						const tempFiles = res.tempFiles;
						let resSize = tempFiles[0].size;
						let limitSize = 0.5 * 1024 * 1024;
						if (resSize > limitSize) {
							return uni.showToast({
								title: '上传图片大小不能超过500KB',
								icon: 'none'
							});
						}

						pathToBase64(res.tempFilePaths[0])
							.then((base64) => {
								this.form.avatar = base64;
							})
							.catch((error) => {});
					}
				});
			},
			
			// 获取系统头像
			async getSystem() {
				const { data } = await getUserPortraitApi();
				this.imgs = data;
			},
			
			
			blur() {
				// 过滤特殊字符
				this.form.nickname = this.form.nickname.replace(/[^\u4e00-\u9fa5a-zA-Z0-9\w]/g,'');
			},

		}
	};
</script>

<style lang="scss" scoped>
	.com-head-sculpture {
		position: absolute;
		right: 50rpx;
		top: 100rpx;
	}
	
	.basicinfo-box {
		width: 710rpx;
		height: 342rpx;
		// background: #282e4f;
		// border: 2rpx solid #343c66;
		// border-radius: 10rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		margin: 0 auto;
		border: 2rpx solid #CEDAFF;
		border-radius: 16rpx;
		.item {
			width: 100%;
			padding: 0 30rpx;
			.content {
				align-items: center;
				justify-content: space-between;
				padding: 28rpx 0;
			}
			.lable {
				width: 20%;
			}
			.active {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}
			.value {
				width: 90%;
				text-align: right;
			}
			.icon-right {
				width: 26rpx;
				height: 26rpx;
				margin-left: 16rpx;
			}
			.line2 {
				width: 100%;
				height: 1rpx;
				background: #FFFFFF;
			}
		}
	}

	.submit-btn {
		width: 512rpx;
		height: 76rpx;
		font-size: 28rpx;
		color: #4470FF;
		font-weight: bold;
		line-height: 76rpx;
		text-align: center;
		margin: 77rpx auto;
	}
</style>
